<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        /* 标签选择器 元素选择器 */
        table{
            border: 1px solid #666;
            /* 合并边框 */
            border-collapse: collapse;
            width: 400px;
        }
        th,td{
            border: 1px solid #666;
        }
    </style>
</head>
<body>
    <!-- table是块级元素 -->
    <!--html注释-->
    <!-- 
        border--表格的边框属性
        align--表格的对齐方式 left center right
        width--表格的宽度 height
        cellpadding--表示单元格和内容的距离
        cellspacing--表示单元格和单元格之间的距离
        bgcolor--表示表格的背景色
     -->
     <!--  
         学完css之后就不要使用这些属性了
         border="1px" bgcolor="cyan" align="left" width="400px" cellpadding="0" cellspacing="0px" -->
    <table>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
        <tr>
            <td>444</td>
            <td>555</td>
            <td>666</td>
        </tr>
        <tr>
            <td>777</td>
            <td>888</td>
            <td>999</td>
        </tr>
    </table>
    <br>
    <!--  -->
    <table>
        <!-- 表头 -->
        <!-- th一般用于表头单元格 默认有居中加粗效果 -->
        <!-- caption表示表格标题标签 -->
        <caption align="right">学生信息表</caption>
        <!-- colgroup列分组 column 表示列-->
        <colgroup>
            <col style="background-color: aqua;">
            <col span="2" style="background-color: blue;">
        </colgroup>
        <thead>
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>班级</th>
            </tr>
        </thead>
        <!--表体 -->
        <tbody>
            <tr>
                <td>姓名</td>
                <td>学号</td>
                <td>班级</td>
            </tr>
        </tbody>
        <!-- 表脚 -->
        <tfoot>
            <tr>
                <td>姓名</td>
                <td>学号</td>
                <td>班级</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>